<script setup lang="ts">
import { RouterView } from "vue-router"
// import router from "@/router"
import { useRoute,useRouter } from "vue-router";
import {reactive,computed} from 'vue'
import type { TabberList } from '@/types/data'

const route = useRoute()
const router = useRouter()

const tabbarData = reactive<TabberList>([{
  name: "面经",
  path: "/index",
  icon: "home-o"
}, {
  name: "收藏",
  path: "/collect",
  icon: "star-o"
}, {
  name: "喜欢",
  path: "/like",
  icon: "like-o"
}, {
  name: "我的",
  path: "/my",
  icon: "friends-o"
}])
defineOptions({
  name: 'HomePage'
})

const showTitle = computed(() => {
  const obj = tabbarData.find(item => item.path === route.path)
  return obj?.name || "标题"
})

</script>

<template>
 <!-- <van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click="router.back()"
 /> -->
 <van-nav-bar v-if="route.path !== '/index' && route.path !== '/my' " :title="showTitle" left-text="返回" left-arrow fixed @click-left="router.back()"/>

  <RouterView />
  <van-tabbar route>
    <!-- <van-tabbar-item icon="home-o" to="/index">面经</van-tabbar-item>
    <van-tabbar-item icon="star-o" to="/collect">收藏</van-tabbar-item>
    <van-tabbar-item icon="like-o" to="/like">喜欢</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/my">我的</van-tabbar-item> -->
    <van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :icon="item.icon" :to="item.path">
      {{
      item.name
      }}
    </van-tabbar-item>
  </van-tabbar>

</template>

<style scoped>
</style>
